<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				margin: 20px auto;
			}
			div:first-child{
				background: #369;
			}
			div:first-child:hover{
				/*移动*/
				transform: translate(-100px,100px);   
			}
			div:nth-child(2){
				background: #963;
			}
			div:nth-child(2):hover{
				/*放大缩小*/
				transform: scale(0.5);
			}
			div:nth-child(3){
				background: #999;
			}
			div:nth-child(3):hover{
				/*旋转*/
				transform: rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>
